<template>
  <div class="container">
    <!-- 新增关闭按钮 -->
    <button class="close-button" @click="handleClose">×</button>
    <!-- 左侧区域 -->
    <div class="left-panel">
      <OverviewPanel style="flex: 0.8" />
      <FlowMonitorPanel style="flex: 1.2" />
    </div>

    <!-- 三维可视化区域 -->
    <div class="center-3d">
      <iframe ref="iframeRef" :src="iframeSrc" class="three-iframe"></iframe>
    </div>
    <div class="bottom-panel">
      <DashboardNav />
    </div>
    <!-- 右侧区域 -->
    <div class="right-panel">
      <AlarmManagement style="flex: 0.2" />
      <MotorHealth style="flex: 0.8" />
    </div>
    <router-view />
  </div>
</template>

<script setup lang="ts">
  import OverviewPanel from '/src/views/DigitalTwin/monitor/overview/components/OverviewPanel.vue';
  import FlowMonitorPanel from '/src/views/DigitalTwin/monitor/overview/components/FlowMonitorPanel.vue';
  import AlarmManagement from '/src/views/DigitalTwin/monitor/overview/components/AlarmManagement.vue';
  import TaskMonitor from '/src/views/DigitalTwin/monitor/overview/components/TaskMonitor.vue';
  import MotorHealth from '/src/views/DigitalTwin/monitor/overview/components/MotorHealth.vue';
  import { useRouter } from 'vue-router';
  import DashboardNav from '/src/views/DigitalTwin/monitor/Navigation/DashboardNav.vue';
  import { computed, onMounted, ref } from 'vue';
  // 导入 Node-RED 相关功能
  import {
    connectToNodeRed,
    handleTaskComplete,
    setupPageVisibilityListener,
    setEnvironmentMode,
  } from '/@/core/communication/nodered';
  import ReceiveMessage from '/@/core/communication/ReceiveMessage';
  import { ReceiveMessageType } from '/@/config/DeclareGlobal';
  import sendToUnity from '/@/core/communication/SendToUnity';

  // 计算iframe的src地址
  const iframeSrc = computed(() => {
    const host = process.env.NODE_ENV === 'development' ? window.location.hostname : window.location.hostname;
    return `http://${host}:9000/`;
  });

  const router = useRouter();
  const iframeRef = ref<HTMLIFrameElement | null>(null);
  const isWebGL = ref(true); // 默认使用WebGL模式

  const handleClose = () => {
    // 返回上一页或指定路由
    router.go(-1);
    // 或直接跳转到指定路由
    // router.push('/your-target-route');
  };
  
  // 监听键盘事件
  function setupKeyboardListener() {
    document.addEventListener('keydown', (event) => {
      // 按U键切换环境模式
      if (event.key === 'u' || event.key === 'U') {
        isWebGL.value = !isWebGL.value;
        // 更新 Node-RED 模块中的环境模式
        setEnvironmentMode(isWebGL.value);
        console.log(`已切换到 ${isWebGL.value ? 'webgl' : 'unity'} 模式`);
      }
    });
  }
  
  // 修改任务完成监听器
  ReceiveMessage.addListener(ReceiveMessageType.TaskComplete, (e: any) => {
    handleTaskComplete(e, isWebGL.value);
  });

  onMounted(async () => {
    setupKeyboardListener();
    setupPageVisibilityListener();
    if (iframeRef.value) {
      try {
        sendToUnity.init(iframeRef.value);
        console.log('SendToUnity 初始化成功！');
      } catch (error) {
        console.error('初始化失败：');
      }
    } else {
      console.error('iframeRef 未找到，请检查 DOM 元素。');
    }
    
    // 创建Node-RED WebSocket连接
    connectToNodeRed();
  });
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
  }
  .center-3d {
    position: absolute;
    inset: 0; /* 等同于 top/right/bottom/left: 0 */
    z-index: 1;
  }
  /* 统一面板样式 */
  .left-panel {
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
    background: linear-gradient(to right, rgba(17, 27, 42, 0.8), rgba(80, 141, 192, 0.05));
    z-index: 999;
    display: flex;
    flex-direction: column;
  }

  .right-panel {
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0;
    background: linear-gradient(to left, rgba(17, 27, 42, 0.8), rgba(80, 141, 192, 0.05));
    z-index: 999;
    display: flex;
    flex-direction: column;
  }
  .bottom-panel {
    position: absolute;
    bottom: 0;
    left: 30%;
    z-index: 999;
  }

  /* iframe样式优化 */
  .three-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* 卡片样式深度定制 */
  :deep(.el-card) {
    background: var(--panel-bg);
    border: 0.052vw solid var(--border-color);
    backdrop-filter: blur(0.417vw);
    border-radius: 0.417vw;
    transition: all 0.3s ease;
  }

  :deep(.el-card__header) {
    border-bottom: 0.05vw solid var(--border-color) !important;
    color: #fff;
    font-size: 0.8vw;
    font-weight: 500;
  }

  :deep(.el-card__body) {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.833vw;
    height: calc(100% - 3.125vw);
  }

  /* 悬停效果 */
  :deep(.el-card:hover) {
    transform: translateY(-0.104vw);
    box-shadow: 0 0.208vw 0.781vw rgba(0, 0, 0, 0.2);
  }

  /* 关闭按钮 */
  .close-button {
    position: fixed;
    top: 1vh;
    right: 0.6vw;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: rgba(255, 75, 75, 0.9);
    border: 0.052vw solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.5vw;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0.2vw 0.6vw rgba(0, 0, 0, 0.2);
  }

  .close-button:hover {
    background: rgba(255, 90, 90, 1);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.3);
  }

  .close-button:active {
    transform: scale(0.95) rotate(90deg);
  }
</style>